<template>
  <div class="container">
    <el-form
      :model="registerForm"
      :rules="rules"
      ref="registerForm"
      label-width="100px"
      label-position="top"
      class="registerInfoForm"
      size="small"
    >
      <el-form-item label="挂号单号" prop="registrationNumber">
        <el-input v-model="registerForm.registrationNumber"></el-input>
      </el-form-item>
      <el-form-item label="科室" prop="departmentType">
        <el-select
          v-model="registerForm.departmentType"
          placeholder="请选择科室"
        >
          <template v-for="item in departmentInfo">
            <el-option
              :label="item.departmentName"
              :value="item.departmentId"
              :key="item.departmentId"
            >
            </el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="接诊类型" prop="receptionType">
        <el-select
          v-model="registerForm.receptionType"
          placeholder="请选择接诊类型"
        >
          <el-option label="线下就诊" :value="0"></el-option>
          <el-option label="网络问诊" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="接诊医生" prop="doctor">
        <el-select v-model="registerForm.doctor" placeholder="请选择接诊医生">
          <template v-for="item in doctors">
            <el-option
              :label="item.doctorName"
              :value="item.doctorId"
              :key="item.doctorId"
            >
            </el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="挂号费用" prop="registrationFee">
        <el-select
          v-model="registerForm.registrationFee"
          placeholder="请选择挂号费用"
        >
          <el-option label="20" :value="20"></el-option>
          <el-option label="50" :value="50"></el-option>
          <el-option label="100" :value="100"></el-option>
          <el-option label="200" :value="200"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="诊疗费" prop="fee">
        <el-select v-model="registerForm.fee" placeholder="请选择诊疗费">
          <el-option label="200" :value="200"></el-option>
          <el-option label="500" :value="500"></el-option>
          <el-option label="1000" :value="1000"></el-option>
          <el-option label="2000" :value="2000"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="挂号日期" prop="date">
        <el-date-picker
          v-model="registerForm.date"
          type="date"
          placeholder="选择日期"
          editable:true
          prefix-icon="prefix"
          class="date"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="挂号员" prop="registrar">
        <el-input v-model="registerForm.registrar"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Bus from "../../../utils/BUS";
import { registerSub } from "../../../api/register";
export default {
  mounted() {
    Bus.$on("submitData", this.submitData);
    Bus.$on("subPatientForm", this.getPatientForm);
  },
  methods: {
    getPatientForm(val) {
      let registerFormData = { ...this.registerForm, ...val };
      console.log(registerFormData);
      if (this.submitForm) {
        registerSub(registerFormData).then((res) => {
          console.log(res);
          if (res.code == 200) {
            alert(res.msg);
          }
        });
      }
    },
    submitData() {
      this.submitForm("registerForm");
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.resetForm("registerForm");
          return true;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  data() {
    return {
      departmentInfo: [
        { departmentId: "9790001", departmentName: "全科" },
        { departmentId: "9790002", departmentName: "眼科" },
      ],
      doctors: [
        { doctorId: "1001", doctorName: "王医生" },
        { doctorId: "1002", doctorName: "张医生" },
        { doctorId: "1003", doctorName: "吴医生" },
      ],
      registerForm: {
        registrationNumber: "",
        departmentType: "",
        receptionType: "",
        doctor: "",
        registrationFee: "",
        fee: "",
        date: "",
        registrar: "",
      },
      rules: {
        registrationNumber: [
          { required: false, message: "请输入挂号单号", trigger: "blur" },
        ],
        departmentType: [
          { required: true, message: "请选择科室", trigger: "change" },
        ],
        receptionType: [
          { required: true, message: "请选择接诊类型", trigger: "change" },
        ],
        doctor: [
          { required: true, message: "请选择接诊医生", trigger: "change" },
        ],
        registrationFee: [
          { required: true, message: "请选择挂号费用", trigger: "change" },
        ],
        fee: [{ required: false, message: "请选择诊疗费", trigger: "change" }],
        date: [{ required: false, message: "请选择挂号日期", trigger: "blur" }],
        registrar: [
          { required: false, message: "请输入挂号员", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  height: 180px;
  background-color: #e6e7fb;
  border-radius: 4px;
  padding: 20px 10px 20px;
  margin-right: 30px;
  margin-bottom: 30px;
}
.registerInfoForm {
  height: 100%;
  display: flex;
  flex-wrap: wrap;

  .el-form-item:nth-child(4n) {
    margin-right: 0;
  }
  /deep/ .el-form-item {
    margin-right: 20px;
    margin-bottom: 20px;
    .el-form-item__label {
      padding: 0;
      margin: 0;
      font-size: 12px;
      line-height: 20px;
      color: #5c5c65;
    }
    .el-form-item__content {
      .el-input {
        .el-input__inner {
          width: 260px;
          height: 40px;
        }
      }

      .el-select {
        width: 100%;
        height: 100%;
      }
    }
    .date {
      width: 100%;
      .prefix {
        display: none;
      }
      .el-input__inner {
        padding-left: 15px;
      }
    }
  }
}
</style>